<!-- 采购申请 -->
<template>
  <div>
    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <el-button type="success" @click="add">
        <el-icon class="icon">
          <Plus />
        </el-icon>
        创建采购申请
      </el-button>
      <ELTable v-bind="tableConfig" ref="staffTable">
        <template #addTime="{ scope }">
          {{ dayjs(scope.row.addTime).format("YYYY-MM-DD HH:mm") }}
        </template>

        <template #operate="{ scope, deleteHandle }">
          <el-button
            :icon="Delete"
            text
            size="small"
            class="btn"
            @click="deleteHandle(scope.row.id)"
          >
            删除
          </el-button>

          <el-button
            v-if="scope.row.state === '待提交'"
            :icon="DocumentCopy"
            text
            size="small"
            class="btn"
            @click="take(scope.row)"
          >
            收货验货
          </el-button>
          <el-button
            v-if="scope.row.state === '已经发货'"
            :icon="Tickets"
            text
            size="small"
            class="btn"
            @click="take(scope.row)"
          >
            查看详情
          </el-button>
        </template>
      </ELTable>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { Delete, Tickets, DocumentCopy } from "@element-plus/icons-vue";
import ELTable, { TableData } from "@/components/ELTable.vue";
import { purchaseList, purchaseDel } from "@/api/logistics/purchase/purchase";
import dayjs from "dayjs";
import { useRouter } from "vue-router";
const router = useRouter();

// 创建采购申请
const add = () => {
  router.push("/logistics/add");
};

// 收货验收
const take = (row: any) => {
  router.push({ path: "/logistics/check", query: { id: row.id } });
};

// 表格
const tableConfig = reactive<TableData>({
  loadData: purchaseList,
  delete: purchaseDel,
  isSelection: false,
  columns: [
    {
      prop: "id",
      label: "序号",
      attrs: {
        width: "70px",
      },
    },
    {
      prop: "addTime",
      label: "创建时间",
      slot: true,
    },
    {
      prop: "addAccountName",
      label: "申请人",
    },
    {
      prop: "counts",
      label: "品种",
    },
    {
      prop: "addAccountId",
      label: "实际采购成本",
    },
    {
      prop: "state",
      label: "状态",
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
      attrs: {
        width: "192px",
      },
    },
  ],
});
</script>

<style scoped lang="less">
.btn {
  color: rgb(245, 108, 127);
  border: none;
}

.btn:last-child {
  color: rgb(64, 158, 255);
}
</style>
